<template>
	<div class="wdxq1" :style="{'min-height':Height-73+'px'}">
		<div class="wdxq_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 2.4rem;" @click="fh"></i>
			<span class="flex1">我的相册</span>
			<i class="el-icon-arrow-left" style="float: right;margin-right: 4%;font-size: 2.4rem;opacity: 0;"></i>
		</div>
		<div style="width: 95%;margin: 0 auto;" class="dtdatil_img clear2">
			<el-upload
			  :action="defines.upHeadImg"
			  list-type="picture-card"
			  :on-success="handlePictureCardPreview"
			  :on-remove="handleRemove"
			  :data='aaa'
			  multiple
			  :file-list='dat_img'
			  :before-upload='beforeupload'
			  name='img_file'
			 >
			  <div style="width: 100%;height: 100%;object-fit: cover;">
			  	<img  src="../../../../static/img/images/wdxc.jpg" style="width: 100%;height: 100%;display: block;object-fit: cover;" />
			  </div>
			</el-upload>
			
		
		</div>
		
		

	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				dat_img:[],
   				dat_img2:[],
				aaa:{
					'uid':window.uid	
				},
				dialogImageUrl: '',
        		dialogVisible: false,
				Height:0,
				tabI:0,
				div3list:[{
					'name':'收到打赏 ',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/wdqb1.jpg',
					
				},{
					'name':'发出打赏',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/wdqb2.jpg'
				},{
					'name':'提现明细 ',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/wdqb3.jpg'
				}]

			}
		},
		mounted() {
			this.Height=document.body.offsetHeight;
			this.getHeadImg();
		},
		methods: {
			getHeadImg(){
				let  loading=this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.$http.post(this.defines.getHeadImg, {
						uid: window.uid
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.dat_img=[];
							let img_html=data.data.data.head_list;
							this.dat_img2=data.data.data.head_list;
							for(let i in img_html){
								this.dat_img.push({
					      			'id':img_html[i].id,
					      			'url':img_html[i].img_url_s
					      		})
							}
							loading.close();
						},
						(error) => {
							console.log(error);
						}
					);
			},
			fh(){
        		window.history.go(-1);
        	},
        	beforeupload(file){
				
			},
			handleRemove(file, fileList) {
				this.dat_img=[];
				this.dat_img=fileList;
				let html_id =[];
				html_id.push(file.id);
				this.$http.post(this.defines.delHeadImg, {
						uid: window.uid,
						img_id_json:html_id,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							
						},
						(error) => {
							console.log(error);
						}
					);
				
		        
		      },
	      	handlePictureCardPreview(response, file, fileList) {
	      		console.log(response);
	      		this.dat_img.push({
	      			'name':'1',
	      			'url':file.response.data.img_list[0].img_url_s
	      		})
	      		this.dat_img2.push(file.response.data.img_list[0]);
	        
	      	},
		}
	}
</script>
<style>
	.dtdatil_img .el-icon-delete{
		display: block !important;	
	    text-align: right;
	    color: #fff;
	    font-size: 12px;
	    margin-top: 4px;
	}
	.dtdatil_img .el-upload-list__item-delete{
		display: block !important;
	}
	.dtdatil_img .el-upload-list__item-actions{
		opacity: 1 !important;
		background: transparent;
	}
	.dtdatil_img .el-icon-check{
		display: none !important;
	}
	.dat_imghide .el-upload--picture-card{
		display: none !important;
	}
	.dtdatil_img ul li{
		width: 32% !important;
		margin: 0.5rem 0 0 0 !important;
		box-sizing: border-box !important;
	}
	.dtdatil_img ul li:nth-child(3n-1){
		margin: 0.5rem 2% 0 2% !important;
	}
	.dtdatil_img .el-upload{
		width: 32% !important;
		margin: 0.5rem 0 0 0 !important;
		box-sizing: border-box !important;
		border: 0 !important;
	}
	.dtdatil_img .el-upload-list__item-status-label{
		display: block !important; 
	}
	.dtdatil_img .el-upload-list--picture-card .el-upload-list__item-thumbnail{
		object-fit: cover;
	}
</style>